﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/jquery-ui.css" rel="stylesheet" />
    <link href="~/Content/css/jsTree/themes/default/style.css" rel="stylesheet" />
    <script src="@Url.Content("~/Scripts/jquery-1.8.2.js")"></script>
    <script src="@Url.Content("~/Content/js/jsTree/jquery.jstree.js")"></script>
    <script src="~/Scripts/jquery-ui-1.9.1.js"></script>
    <script src="~/Content/js/qlgv/TaiLieu.js"></script>
    <style>
        #folder-tree {
            margin-top: 30px;
            float: left;
            height: auto;
            width: auto;
        }
    </style>
</head>
<body>
    <h2>Chọn thư mục</h2>
    <input type="hidden" id="thuMucDuocChon" value="" />
    <div id="select-folder-tree">
    </div>
    <script>
        $(document).ready(function () {
            $("#thuMucDuocChon").val("");

            $("#select-folder-tree").jstree({
                "plugins": ["themes", "json_data", "ui"],
                "json_data": {
                    "ajax": {
                        "url": "/TaiLieuGiangVien/GetThuMuc",
                        "data": function (n) {
                            return {
                                "maThuMucCha": n.attr ? n.attr("id") : null
                            };
                        }
                    }
                }
            });

            $("#select-folder-tree").bind("select_node.jstree", function (NODE, REF_NODE) {
                var a = $.jstree._focused().get_selected();
                $("#thuMucDuocChon").val(a.attr("id"));
                if ($("#folderContent")) {
                    $("#folderContent").load("/TaiLieu/ChonTaiLieuGrid?thuMucHienTai=" + a.attr("id"));
                }
            });
        });
    </script>
</body>
</html>